@import './../../scss_variables.scss';

@mixin small-tag() {
    font-size: var(--xxsmall-text-size);
    padding: 2px 4px;
}

.Tag,
.TagGroup {
    display: inline-flex;
    margin: 2px 0px;
    border-radius: var(--border-radius-sm);
    cursor: inherit;
}
.Tag + .Tag {
    margin-left: 6px;
}

.TagGroup + .TagGroup {
    margin-left: 8px;
}

.Tag {
    padding: 2px 8px;
    font-weight: var(--bold-font);
    font-size: var(--small-text-size);
    font-family: var(--font-accent);
    max-width: 100%;
    white-space: nowrap;

    span {
        @include one-line-ellipsis();
    }

    &.mini {
        padding: 2px 4px;
        font-size: var(--xsmall-text-size);
    }

    &.small {
        @include small-tag();
    }
}

.HoverIconTag {
    .HoverIconTag-hover {
        display: none;
        .Icon {
            padding-left: 4px;
            svg {
                height: 16px;
                width: 16px;
            }
        }
    }
    &:hover {
        .HoverIconTag-hover {
            display: flex;
            cursor: pointer;
        }
    }
}

.TagGroup {
    .Tag {
        margin: 0;
        border-radius: 0;

        &.highlighted {
            background-color: var(--color-accent-dark);
            color: var(--color-accent-lightest-0);
        }
    }
    .Tag:first-child {
        border-top-left-radius: var(--border-radius-sm);
        border-bottom-left-radius: var(--border-radius-sm);
    }
    .Tag:last-child {
        border-top-right-radius: var(--border-radius-sm);
        border-bottom-right-radius: var(--border-radius-sm);
    }

    &.small .Tag {
        @include small-tag();
    }
}
